<template>
  <el-dialog
    width="1100px"
    top="2vh"
    append-to-body
    custom-class="alarmInfo"
    :close-on-click-modal="false"
    :before-close="handleClose"
    destroy-on-close
    :visible.sync="visible"
  >
    <el-container>
      <el-main class="flex-row-center video_main">
        <!-- <LivePlayer
          :videoUrl="players.videoUrl"
          :poster="players.poster"
          :controls="players.bControls"
          :loading.sync="players.bLoading"
          live
          muted
          stretch
          autoplay
          aspect="fullscreen"
          element-loading-text="加载中..."
          element-loading-background="#000"
        >
        </LivePlayer> -->
        <iframe
          :src="systemMsg.streamUrl"
          height="100%"
          width="100%"
          allowfullscreen
          allow="autoplay; fullscreen; microphone;"
        ></iframe>
        <!-- <NewMap v-if="mapVisible" ref="newMap" :floorMsg="systemMsg" @callBack="mapVisible = false" /> -->
      </el-main>
      <el-main class="flex-row-center">
        <div class="info">
          <h4>报警信息</h4>
          <div class="content">
            <div class="flex-row-start">
              <label>设备名称：</label>
              <p>
                {{ systemMsg.deviceName != null ? systemMsg.deviceName : '-' }}
              </p>
            </div>
            <div class="flex-row-start">
              <label>所属网格：</label>
              <p>
                {{ systemMsg.equipment != null ? systemMsg.equipment.gridMountFullPathText : '-' }}
              </p>
            </div>
            <div class="flex-row-start">
              <label>报警地点：</label>
              <p>
                {{ systemMsg.deviceAddress != null ? systemMsg.deviceAddress : '-' }}
              </p>
            </div>
            <div class="flex-row-start">
              <label>报警类型：</label>
              <p>{{ systemMsg.alarmName }}</p>
            </div>
            <div class="flex-row-start">
              <label>状态：</label>
              <el-tag
                effect="plain"
                size="mini"
                :type="
                  systemMsg.confirmRemark === '未确认'
                    ? 'danger'
                    : systemMsg.confirmRemark === '确认超时'
                    ? 'warning'
                    : 'success'
                "
                :class="
                  systemMsg.confirmRemark === '未确认'
                    ? 'danger'
                    : systemMsg.confirmRemark === '确认超时'
                    ? 'warning'
                    : 'success'
                "
                >{{ systemMsg.confirmRemark }}</el-tag
              >
              <el-tag
                effect="plain"
                size="mini"
                :type="systemMsg.alarmJobCode ? 'success' : 'danger'"
                style="margin-left:10px;"
                >{{ systemMsg.alarmJobCode ? '已接单' : '未接单' }}</el-tag
              >
            </div>

            <div class="flex-row-start">
              <label>报警时间：</label>
              <p>{{ systemMsg.alertTime }}</p>
            </div>
            <div v-if="systemMsg.deviceType" class="flex-row-start">
              <label>设备类别：</label>
              <p>{{ systemMsg.deviceTypeStr != null ? systemMsg.deviceTypeStr : '' }}</p>
            </div>

            <div class="vdieo flex-row-start">
              <!-- <el-image src="static/dashboard/camera.png">
                <div slot="error"
                     class="image-slot image-error">
                  <i class="el-icon-picture-outline"></i>
                </div>
                <div slot="placeholder"
                     class="image-slot">
                  <div>
                    <p class="flex-row-center"
                       style="margin-bottom:6px;">
                      <i class="el-icon-loading"
                         style="font-size:20px;"></i>
                    </p>
                    <p>加载中</p>
                  </div>
                </div>
              </el-image>
             <div v-if="equipmentHasMonitor"
                   class="view"
                   @click="showView(systemMsg)">（点击查看画面）</div>
              <div v-else
                   style="color:red;margin-left:8px;">
                未关联监控设备，无法查看监控
              </div> -->
            </div>
          </div>
          <div class="footer flex-row-around">
            <div
              v-if="!systemMsg.alarmJobCode && systemMsg.alarmName !== '巡检隔离报警'"
              class="buttom"
              @click="dispatchHandle"
            >
              派单处理
            </div>
            <!-- <div v-if="systemMsg.alarmName !== '巡检隔离报警'"
                 class="buttom"
                 @click="addQuaranHandle">设置隔离</div> -->
            <div v-if="!systemMsg.alarmJobCode" class="buttom" @click="eliminateHandle">直接消警</div>
            <div
              v-if="!systemMsg.alarmJobCode && systemMsg.alarmName !== '巡检隔离报警'"
              class="buttom"
              @click="confirm(systemMsg)"
            >
              确认
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <distribute
      v-if="isDistributeVisible"
      ref="distributeDialog"
      :systemMsg="distributeParams"
      :dialog-visible="isDistributeVisible"
      @close="closeDialog"
      @success="successDialog"
    />
    <eliminateWarning
      v-if="isEliminateVisible"
      ref="eliminateDialog"
      :systemMsg="params"
      :dialog-visible="isEliminateVisible"
      :alarmReasonData="alarmReasonData"
      @close="closeDialog"
      @success="successDialog"
    />
  </el-dialog>
</template>

<script>
import Distribute from './distribute'
import EliminateWarning from './eliminateWarning'
const appEl = document.querySelector('#app')
import moment from 'moment'
import LivePlayer from '@liveqing/liveplayer'
moment.locale('zh-cn')
export default {
  name: 'AlarmInfo',
  components: {
    Distribute,
    EliminateWarning,
    LivePlayer
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    systemMsg: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      // systemMsg: {},

      moment: moment,
      // visible: false,
      // isView: true,
      // videoVisible: false,
      equipmentId: null,
      // mapVisible: false,
      collectName: '',
      equipmentHasMonitor: false, // 设备是否关联了监控
      equipmentHasPlan: false, // 设备是否关联了平面图
      // equipmentPlanData: {}, // 设备平面图数据
      alarmReasonData: [],
      floorMsg: {},
      audioSrc: '',
      audio: null,
      systemMsgData: null,
      deviceDictionaries: [],
      players: {
        serial: '',
        code: '',
        videoUrl: '', // process.env.VUE_APP_VIDEO_API + 'uploads/image/vidio/222.mp4',
        protocol: '',
        poster: '', // 视频封面图片 String default ''
        bLoading: true, // 指示加载状态, 支持 sync 修饰符
        bCloseShow: true,
        bControls: true, // 显示播放器控制栏 Boolean default true
        bSmart: true,
        bFullscreen: true,
        closeTimer: 0,
        device_id: '',
        device_name: ''
      },
      distributeParams: null,
      isDistributeVisible: false,
      isEliminateVisible: false,
      params: null
    }
  },
  mounted() {
    const THIS = this
    appEl.setAttribute('isdotts', 0)
    appEl.onclick = function(e) {
      const isdotts = appEl.getAttribute('isdotts')
      if (isdotts === '1') {
        THIS.doTTS()
        appEl.setAttribute('isdotts', 0)
      }
    }

    console.log('告警信息：', this.systemMsg)
    this.getAlarmType()
    this.deviceTypeDictionaries()
    this.initVideo()
    this.initAudio()
    // this.$nextTick(() => {
    //   this.mapVisible = true
    // })
  },
  methods: {
    initAudio() {
      this.audio = new Audio()
      this.audio.src =
        this.systemMsg.deviceStatus === 1
          ? require('@/assets/aduio/guzhang.mp3')
          : require('@/assets/aduio/huojing.mp3')
      this.audio.play()
      setTimeout(() => {
        appEl.setAttribute('isdotts', 1)
        appEl.click()
      }, 1000)
    },
    initVideo() {
      this.$get('console/equipmentMonitorSettings/getByEquipmentId', {
        equipmentId: this.systemMsg.equipment.id
      }).then(res => {
        // 判断该设备是否有关联的监控
        if (res.data) {
          const layout = JSON.parse(res.data.layout)
          if (layout.length === 0) {
            this.players.videoUrl = process.env.VUE_APP_VIDEO_API + 'uploads/image/vidio/222.mp4'
          } else {
            this.players.videoUrl = layout
          }
        }
      })
    },
    deviceTypeDictionaries() {
      this.$get('system/dict/getDictValueAttr', { fieldName: 'collect_type', tableName: 't_equipment_collect' }).then(
        r => {
          this.deviceDictionaries = r.data.dictValue
          const deviceList = this.deviceDictionaries.filter(x => x.dictValue === this.systemMsg.deviceType)
          if (deviceList.length > 0) {
            this.systemMsg['deviceTypeStr'] = deviceList[0].dictText
          }
        }
      )
    },
    handleClose() {
      // if (this.$refs.newMap.popMarker.marker) {
      //   this.$refs.newMap.popMarker.close()
      // }
      // this.$refs.newMap.dialogClose()
      // this.visible = false
      // this.mapVisible = false
      // this.$store.commit('cim/setIsUpdate', new Date())
      // this.visible = false
      this.$emit('close', false)
    },
    confirm(systemMsg) {
      this.$get('alert/equipmentCollectAlert/confirmAlertTime', { alertId: [systemMsg.id] }).then(r => {
        this.$message({
          message: '已确认',
          type: 'success'
        })
        this.handleClose()
      })
    },
    getAlarmType() {
      this.$get('system/dict/getDictValueAttr', {
        fieldName: 'alarm_actual_desc_2',
        tableName: 't_job_reply'
      }).then(r => {
        this.alarmReasonData = r.data.dictValue
      })
    },
    doTTS() {
      var msg = new SpeechSynthesisUtterance(
        this.systemMsg.deviceAddress +
          '，' +
          // this.systemMsg.deviceSource +
          // '，' +
          // this.systemMsg.deviceName +
          // '，' +
          this.systemMsg.alarmName
      )
      msg.volume = 100
      msg.rate = 1
      msg.pitch = 1.5
      window.speechSynthesis.speak(msg)
    },
    showView(msg) {
      this.equipmentId = msg.equipmentCollect.id
      this.collectName = msg.equipmentCollect.collectName
      this.$refs['pEasyLayer'].visible = true
    },
    async addQuaranHandle() {
      const res = await this.$get(`console/equipmentCollect/${this.systemMsg.equipmentCollect.id}`)
      this.$refs['addQuaran'].visible = true
      this.$refs['addQuaran'].init(
        res.data.equipmentCollectIsolation
          ? res.data.equipmentCollectIsolation
          : { id: this.systemMsg.equipmentCollect.id },
        !!res.data.equipmentCollectIsolation
      )
    },
    eliminateHandle() {
      this.isEliminateVisible = true
      this.params = this.systemMsg
    },
    eliminateHandleSuccess() {
      this.$refs.eliminateAlarm.visible = false
      const arr = this.systemMsgList.filter(
        el => el.equipmentCollect && el.equipmentCollect.id !== this.systemMsg.equipmentCollect.id
      )
      // this.visible = false
      this.handleClose()
      this.$store.commit('cim/resetMsg', arr)
      this.$emit('getData')
    },
    dispatchHandle() {
      this.distributeParams = this.systemMsg
      this.isDistributeVisible = true
      // this.$nextTick(() => {
      //   this.$refs['orderDistributionList'].visible = true
      //   this.$refs['orderDistributionList'].init(this.systemMsg)
      // })
    },
    closeDialog() {
      this.isDistributeVisible = false
      this.isEliminateVisible = false
    },
    successDialog() {
      this.isDistributeVisible = false
      this.isEliminateVisible = false
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-row-start {
  display: flex;
  align-items: center;
}
.el-main {
  padding: 50px 20px !important;
}
.video_main {
  width: 60%;
  position: relative;
  margin-left: 30px;
}
/deep/.alarmInfo {
  background: none;
  background-image: url('~@/assets/popup-bg.png');
  background-size: 100% 100%;
  min-height: 672px;
  .el-dialog__header {
    border-bottom: none !important;
  }
  .el-dialog__headerbtn {
    background: none;
    background-image: url('~@/assets/exit.png');
    background-size: 100% 100%;
    width: 46px;
    height: 46px;
    top: 22px;
    right: 32px;
  }
  // .info-main {
  .info {
    width: 357px;
    // height: 497px;
    border: 1px solid rgba(107, 231, 243, 1);
    border-radius: 5px;
    h4 {
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #00ebfb;
      border-bottom: 1px solid rgba(107, 231, 243, 1);
      margin: 0;
    }
    .content {
      padding: 20px;
      color: #ffffff;
      label {
        min-width: 70px;
      }
      /deep/.el-image {
        width: 64px;
        /deep/.image-error {
          font-size: 30px !important;
        }
        /deep/.image-slot {
          height: 64px;
          font-size: 14px;
          display: flex;
          justify-content: center;
          align-items: center;
          // width: 100%;
          // height: 100%;
          background: #f5f7fa;
          color: #909399;
        }
      }
      .vdieo {
        margin-top: 20px;
        .view {
          color: #1893cd;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
    .footer {
      flex-wrap: wrap;
      justify-content: space-between;
      display: flex;
      padding: 10px;
      margin-top: 14px;
    }
  }
  .buttom {
    margin-bottom: 10px;
    width: 100px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: rgba(0, 185, 255, 0.3);
    border: 1px solid rgba(17, 179, 255, 1);
    border-radius: 2px;
    color: #ffffff;
    cursor: pointer;
    transition: 0.1s;
    user-select: none;
    &:hover {
      background: rgba(0, 185, 255, 0.8);
    }
    &:active {
      background: rgba(0, 185, 255, 0.3);
    }
  }
  .not-linked {
    width: 400px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #ffffff;
  }
}
</style>
